<div class="page-header">
    <h1>
        Mutasi Transaksi
        <small>
            <i class="icon-double-angle-right"></i>
            Mutasi Transaksi dan Bonus Member
        </small>
    </h1>
</div>

<div class="row">
    <div class="col-xs-11">
        <!-- PAGE CONTENT BEGINS -->
        <form id="frm" class="form-horizontal" role="form" action="" method="post">
            <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="transType"> Tipe Transaksi </label>
                    <div class="col-sm-9">
                            <select class="width-30 chosen-select" id="transType" name="transType" data-placeholder="Pilih Tipe Transaksi...">
                                <option value="">Pilih Tipe Transaksi...</option>
                                <?php
                                while ($this->transType->next()) {
                                    $tt = $this->transType->current();

                                    echo '<option value="' . $tt['trans_type_code'] . '">' . $tt['trans_type_name'] . '</option>';
                                }
                                ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="transType"> Nomor Akun </label>
                    <div class="col-sm-9">
                            <input type="text" class="easyui-text" style="width:150px" name="accNum" id="accNum" placeholder="Nomor Akun" value=""></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="date1">Periode Transaksi</label>
                    <div class="col-sm-9">
                        <input type="text" class="easyui-text" style="width:150px" name="date1" id="date1" placeholder="Tanggal awal" value="<?php echo $this->dateTmp1; ?>"></input> s/d <input type="text" class="easyui-text" style="width:150px" name="date2" id="date2" placeholder="Tanggal akhir" value="<?php echo $this->dateTmp2; ?>"></input>
                        <button class="btn btn-info btn-sm" type="button" onclick="cari()">
                            Cari
                        </button>
                    </div>
                </div>
        </form>
        <br>

        <table cellpadding="5px">
            <tr>
                <td>Periode</td>
                <td>: </td>
                <td><span id="spPeriode"><?php echo $this->dateTmp1;?> s/d <?php echo $this->dateTmp2;?></span></td>
            </tr>
        </table>


        <table id="grid-table"></table>

        <div id="grid-pager"></div>

        <span id="spTotalSaldo">
            <table cellpadding="5px">
                    <tr>
                        <td>Total Kredit</td>
                        <td>: </td>
                        <td align="right"> <?php echo $this->dataSaldo['kredit'];?></td>
                    </tr>
                    <tr>
                        <td>Total Debet</td>
                        <td>: </td>
                        <td align="right"> <?php echo $this->dataSaldo['debet'];?></td>
                    </tr>
                    <tr>
                        <td>Saldo Akhir</td>
                        <td>: </td>
                        <td align="right"> <?php echo $this->dataSaldo['saldo'];?></td>
                    </tr>
            </table>
        </span>

        <div id="detail-form" class="modal" tabindex="-1">
            <div class="modal-dialog">
                    <div class="modal-content">
                            <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="blue bigger">Detail Transaksi &nbsp;&nbsp;&nbsp;<img id="imgload" src="../img/loading.gif" width="20" height="20"/></h4>
                            </div>

                        

                            <div class="modal-body overflow-visible">
                                <div class="row">

                                    <div class="col-xs-11" id="row-content">

                                        <form id="formWD" class="form-horizontal" role="form" action="" method="post">
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="account_num1"> No Akun </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="account_num1" name="account_num1" placeholder="No Akun" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="account_num2"> No Akun 2 </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="account_num2" name="account_num2" placeholder="No Akun 1 " class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="trans_dtm"> Tgl Trans </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="trans_dtm" name="trans_dtm" placeholder="Tgl Trans " class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="trans_type_name"> Tipe Transaksi </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="trans_type_name" name="trans_type_name" placeholder="Tipe Transaksi" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="amount"> Amount </label>

                                            <div class="col-sm-7">
                                                <input type="text" id="amount" name="amount" placeholder="Amount" class="col-xs-10 col-sm-11" readonly/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="mutation_type"> Mutasi </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="mutation_type" name="mutation_type" placeholder="Mutasi" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="notes_txt"> Catatan </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="notes_txt" name="notes_txt" placeholder="Catatan" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="trans_status"> Status </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="trans_status" name="trans_status" placeholder="Status" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="account_name"> Nama Akun </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="account_name" name="account_name" placeholder="Nama Akun" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="xs1"> Info 1 </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="xs1" name="xs1" placeholder="Info 1" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="xs2"> Info 2 </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="xs2" name="xs2" placeholder="Info 2" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="xs3"> Info 3 </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="xs3" name="xs3" placeholder="Info 3" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="xs4"> Info 4 </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="xs4" name="xs4" placeholder="Info 4" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                                <label class="col-sm-5 control-label no-padding-right" for="xs5"> Info 5 </label>

                                                <div class="col-sm-7">
                                                    <input type="text" id="xs5" name="xs5" placeholder="Info 5" class="col-xs-10 col-sm-11"  readonly  />
                                                </div>
                                            </div>
                                        <div class="form-group">
                                                <label class="col-sm-5 control-label no-padding-right" for="xs6"> Info 6 </label>

                                                <div class="col-sm-7">
                                                    <input type="text" id="xs6" name="xs6" placeholder="Info 6" class="col-xs-10 col-sm-11"  readonly  />
                                                </div>
                                            </div>
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="bank_acc_no"> No Akun Bank </label>

                                            <div class="col-sm-7">
                                                <input type="text" id="bank_acc_no" name="bank_acc_no" placeholder="No Akun Bank " class="col-xs-10 col-sm-11" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="bank_acc_name"> Nama Akun Bank </label>

                                            <div class="col-sm-7">
                                                <textarea id="bank_acc_name" name="bank_acc_name" class="autosize-transition form-control" placeholder="Nama Akun Bank" readonly></textarea>

                                            </div>
                                        </div>
                                     </form>


                                    </div>

                                </div>
                            </div>

                            <div class="modal-footer">
                                    <button class="btn btn-info btn-sm" id="closePop" data-dismiss="modal">
                                            <i class="icon-remove"></i>
                                            Close
                                    </button>
                            </div>
                    </div>
            </div>
        </div>

        <script type="text/javascript">
                var $path_base = "/";//this will be used in gritter alerts containing images
        </script>

        <!-- PAGE CONTENT ENDS -->
    </div>
</div>


<script>

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    var satrtDate = $('#date1').datepicker({
      format: 'yyyy-mm-dd'
    }).on('changeDate', function(ev) {
      //if (ev.date.valueOf() > endDate.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        endDate.setValue(newDate);
      //}
      satrtDate.hide();
      $('#date2')[0].focus();
    }).data('datepicker');

    var endDate = $('#date2').datepicker({
      onRender: function(date) {
        return date.valueOf() <= satrtDate.date.valueOf() ? 'disabled' : '';
      }, format: 'yyyy-mm-dd'
    }).on('changeDate', function(ev) {
      endDate.hide();
    }).data('datepicker');


    jQuery(function($) {

            jQuery('#grid-table').jqGrid({
                url:'<?php echo $this->url() ?>/../../jsondata/mutasitransadmin',
                datatype: "json",
                height: 200,
                colNames:['Tanggal','Nomor Akun','Nama Akun','Jenis Transaksi','Kredit','Debet','Detail'],
                colModel:[
                    {name:'Tanggal',index:'trans_dtm', width:300},
                    {name:'NoAkun',index:'account_num', width:300},
                    {name:'NamaAkun',index:'account_name', width:300},
                    {name:'JenisTransaksi',index:'trans_type_name', width:300},
                    {name:'Kredit',index:'amount_rp', width:300, align:"right"},
                    {name:'Debet',index:'amount_rp', width:300, align:"right"},
                    {name:'Detail',index:'Detail', width:300, align:"center"}
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: '#grid-pager',
                sortname: 'Tanggal',
                viewrecords: true,
                sortorder: "desc",
                caption:"Mutasi Transaksi",
                rownumbers: true,
                loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                        }, 0);
                },

                autowidth: true
            });

            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',{edit:false,add:false,del:false});


            //navButtons
            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',
                    { 	//navbar options
                            search: true,
                            searchicon : 'ui-icon-search orange',
                            refresh: true,
                            refreshicon : 'ui-icon-refresh green'
                    }
            )




            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {

                    var replacement =
                    {
                            'ui-icon-search' : 'ui-icon-search orange',
                            'ui-icon-refresh' : 'ui-icon-refresh green'
                    };
                    $(table).find('.ui-pg-div span.ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })

            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                    var replacement =
                    {
                            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
            }

            function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    });

    function downloadExcel(){

        var num = jQuery('#grid-table').jqGrid('getGridParam','records');

        if (num > 0){

            $.ajax({
            type: 'GET',
            dataType: 'text',
            url: '<?php echo $this->url() ?>/../../excel/cetaksn',
            data: {num: num},
            success: function(result){

                        if (result == "TIMEOUT"){
                            location.href = "<?php echo $this->url() ?>/../../admin";
                        }else{
                            location.href = "<?php echo $this->url() ?>/../../excel/"+result;
                        }
                 }
            });

        }else alert('Tidak terdapat SN Baru, silahkan lakukan Generate SN terlebih dahulu.');

    }



    function cari(){

        

                var transType = $('#transType').val();
                var accNum = $('#accNum').val();
                var date1 = $('#date1').val();
                var date2 = $('#date2').val();


                document.getElementById("spPeriode").innerHTML = date1+" s/d "+date2;
                
                jQuery("#grid-table").jqGrid('setGridParam',{
                    url:"<?php echo $this->url() ?>/../../jsondata/mutasitransadmin?transType="+transType+"&accNum="+accNum+"&date1="+date1+"&date2="+date2
                }).trigger("reloadGrid");


                //Total Saldo
                $.ajax({
                type: 'GET',
                dataType: 'text',
                url: '<?php echo $this->url() ?>/../totalsaldo',
                data: {transType: transType, accNum: accNum, date1: date1, date2: date2},
                success: function(result){

                        document.getElementById("spTotalSaldo").innerHTML = result;
                            
                     }
                });

     

    }


    function detail(transid){

        $("#imgload").attr("src","../img/loading.gif");

        $('#account_num1').val("");
        $('#account_num2').val("");
        $('#trans_dtm').val("");
        $('#trans_type_name').val("");
        $('#amount').val("");
        $('#mutation_type').val("");
        $('#notes_txt').val("");
        $('#trans_status').val("");
        $('#account_name').val("");
        $('#xs1').val("");
        $('#xs2').val("");
        $('#xs3').val("");
        $('#xs4').val("");
        $('#xs5').val("");
        $('#xs6').val("");
        $('#bank_acc_no').val("");
        $('#bank_acc_name').val("");

        $.ajax({
            type: 'GET',
            dataType: 'JSON',
            url: '<?php echo $this->url() ?>/../../jsondata/transdetail',
            data: {transid: transid},
            success: function(result){

                    $('#account_num1').val(result.account_num1);
                    $('#account_num2').val(result.account_num2);
                    $('#trans_dtm').val(result.trans_dtm);
                    $('#trans_type_name').val(result.trans_type_name);
                    $('#amount').val(result.amount);
                    $('#mutation_type').val(result.mutation_type);
                    $('#notes_txt').val(result.notes_txt);
                    $('#trans_status').val(result.trans_status);
                    $('#account_name').val(result.account_name);
                    $('#xs1').val(result.xs1);
                    $('#xs2').val(result.xs2);
                    $('#xs3').val(result.xs3);
                    $('#xs4').val(result.xs4);
                    $('#xs5').val(result.xs5);
                    $('#xs6').val(result.xs6);
                    $('#bank_acc_no').val(result.bank_acc_no);
                    $('#bank_acc_name').val(result.bank_acc_name);

                    $("#imgload").attr("src","../img/blank.jpg");
                 }

            });

    }


</script>




